<template>
	<view class="clearBox">
		<view class="item" @click="nowClear">立即打扫</view>
		<view class="item" @click="appointmentClear" >预约打扫<i><image src="../../static/img/youlan.png"></image></i></view>
		<view class="mpvue-picker">
			<page-head :title="title"></page-head>
		
			<mpvue-picker
				:themeColor="themeColor"
				ref="mpvuePicker"
				:mode="mode"
				:deepLength="deepLength"
				:pickerValueDefault="pickerValueDefault"
				:pickerValueArray="pickerValueArray"
				@onConfirm="onConfirm"				
			></mpvue-picker>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	import mpvuePicker from "../../components/mpvue-picker/mpvuePicker";
	export default {
		data() {						    
			return {						
				pickerSingleArray: [{label:'a',value:'1'},{label:'b',value:'2'}],
				themeColor: "#007AFF",
				pickerText: "",
				mode: "",
				deepLength: 1,
				pickerValueDefault: ['1'],
				pickerValueArray: [],	
					
			}
		},
		computed: {
			...mapState({
				user: "user",													
			})
		},
		components: {
			mpvuePicker
		},
		methods: {
			nowClear(){ //没有订单状态  点击只能服务项  弹窗提示
				uni.showModal({
					title: "提示",
					content: "确认发起打扫请求？",
					success: res => {
						if (res.confirm) {
							console.log("用户点击确定");					
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					}
				});
			},
			appointmentClear(){			
				this.pickerValueArray = this.pickerSingleArray;
				this.mode = "timeSelector";
				this.deepLength = 1;
				// this.pickerValueDefault = [1];
				this.$refs.mpvuePicker.show();				
			},
			onConfirm(e) {
				console.log( e);
				console.log(e.value);
				console.log(e.name);
								
			}						
		}
	}
</script>
<style>
	.clearBox{
		height: 100%;
		background-color: #f5f5f5;
		padding: 40upx 24upx;
	}
	.clearBox .item{
		width: 100%;
		font-size: 32upx;
		color: #000;
		height:136upx;
		line-height: 136upx;
		background:#fff;
		box-shadow:0px 8upx 8upx 0px rgba(0, 0, 0, 0.05);
		border-radius:16upx;
		padding-left:24upx;
		overflow: hidden;
		position: relative;
		margin-bottom: 40upx;
	}
	.clearBox .item image{
		width: 10upx;
		height: 18upx;		
		position: absolute;
		right: 20upx;
		top: 55upx;
	}
</style>
